<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="container-div ui-layout-center" >
		<div class="row" style="height:500px;">
			<div class="col-sm-6"  style="padding:0 7px;">
				<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
				<div id="completeStatusPie" style="width:100%;height:270px;"></div>
				</div>
			</div>
			<div class="col-sm-6"  style="padding:0 7px;">
				<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<div id="checkPduBar" style="width:100%;height:270px;"></div>
				</div>
			</div>
			<div class="col-sm-6"   style="padding:7px 7px;">
				<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<div id="regionBar" style="width:100%;height:270px;"></div>
				</div>
			</div>
			<div class="col-sm-6"   style="padding:7px 7px;">
				<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
					<div id="pduBar" style="width:100%;height:270px;"></div>
				</div>
			</div>
		</div>

	</div>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:inline="javascript"> var ctx = [[@{/}]]; </script>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
	<script th:src="@{/js/echarts.js}"></script>
	<script th:inline="javascript">
	completeStatusPie();
	checkPduBar();
	pduBar();
	regionBar();
	function completeStatusPie(){
		var completeStatusPie = echarts.init(document.getElementById('completeStatusPie'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx + "human/board/list/listByPie",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var BGdata={
						text:"HC完成情况统计",
						subtext:recvData.data,
						seriesData:recvData.serizeData
				}
				var option = {
					    title : {
					        text: BGdata.text,
					        x:'center',
					        subtext: BGdata.subtext
					    }, 
					    tooltip : {
					        trigger: 'item',
					        formatter: '{b}: {c}({d}%)'
					    },
					    legend: {
					        top: 'bottom'
					    },
					    series : [
					        {
					            name: 'HC完成情况',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:BGdata.seriesData,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                },
					               normal: {
										color: function(params) {
											var colorList = ['#C1232B', '#FE8463', '#E87C25', '#27727B'];
											return colorList[params.dataIndex]
										},
										 label:{
											show: true,
											formatter: '{b} : {c} ({d}%)'
										},
									  labelLine :{show:true}
									}
					            }
					        }
					    ]
				};
				completeStatusPie.setOption(option);
				$(window).resize(function(){
					completeStatusPie.resize();
				})
			}
		});
	}
	////交付中心查看骨干类型
	function checkPduBar(){
		var checkPduBar = echarts.init(document.getElementById('checkPduBar'));

		$.ajax({
			cache : true,
			type : "POST",
			url : ctx +"human/board/list/listByCheckPdu",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text:"考核单元统计",
						legnedData:recvData.legnedData,
						xAixsData:recvData.xAixsData,
						seriesData:recvData.seriesData
				};
					var option1 = {
						title: {
							text: '考核单元统计',
							 subtext: '',
							left: 'center'
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data:data.legnedData,
							top: 'bottom'
						},
						 grid: {
							left: '3%',
							right: '4%',
							bottom: '5%',
							containLabel: true
						}, 
						xAxis: {
							type: 'category',
							data:data.xAixsData,
							axisLabel : {//坐标轴刻度标签的相关设置。
								interval:0,
								rotate:"30"
							}
						},
						yAxis: {
							 splitLine:{show: false},
							type: 'value'
						},
						series:data.seriesData
					};
					checkPduBar.setOption(option1,true);
					$(window).resize(function(){
						checkPduBar.resize();
					})
			}
		});
	}
	//交付中心查看骨干月变化
	function pduBar(){
		var pduBar = echarts.init(document.getElementById('pduBar'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx +"human/board/list/listByPdu",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text: '考核单元统计',
						legnedData:recvData.legnedData,
						xAixsData:recvData.xAixsData,
						seriesData:recvData.seriesData
				};
				var option = {
						 tooltip : {
						       trigger: 'axis',
						 },title: {
							text: '考核单元统计',
							 subtext: '',
							left: 'center'
						},
						 legend: {
						        data:data.legnedData,
						        top: 'bottom'
						 },
						 grid: {
						        left: '2%',
						        right: '3%',
						        bottom: '3%',
						        containLabel: true
						    },
						 xAxis: {
						      type: 'category',
						      boundaryGap: false,
						      axisLabel:{
						    	  interval:0,
						    	  rotate:45
						      },
						      data: data.xAixsData
						 },
						 yAxis: {
						      type: 'value',
						      splitLine:{show: false}
						 },
						 series:data.seriesData
				 };
				 pduBar.setOption(option,true);
				 $(window).resize(function(){
					 pduBar.resize();
				 })
			}
		});
	}
	//交付中心查看骨干月变化
	function regionBar(){
		var regionBar = echarts.init(document.getElementById('regionBar'));
		$.ajax({
			cache : true,
			type : "POST",
			url : ctx +"human/board/list/listByRegion",
			async : false,
			error : function(request) {
				$.modal.alertError("系统错误");
			},
			success : function(recvData) {
				var data={
						text: '地域统计',
						legnedData:recvData.legnedData,
						xAixsData:recvData.xAixsData,
						seriesData:recvData.seriesData
				};
				var option = {
						 tooltip : {
						       trigger: 'axis',
						 },title: {
							text: '地域统计',
							 subtext: '',
							left: 'center'
						},
						 legend: {
						        data:data.legnedData,
						        top: 'bottom'
						 },
						 grid: {
						        left: '2%',
						        right: '3%',
						        bottom: '3%',
						        containLabel: true
						    },
						 xAxis: {
						      type: 'category',
						      boundaryGap: false,
						      axisLabel:{
						    	  interval:0,
						    	  rotate:45
						      }, 
						      data: data.xAixsData
						 },
						 yAxis: {
						      type: 'value',
						      splitLine:{show: false}
						 },
						 series:data.seriesData
				 };
				 regionBar.setOption(option,true);
				 $(window).resize(function(){
					 regionBar.resize();
				 }) 
			}
		});
	}
	
	</script>
</body>
</html>